<template>
    <section>
        <el-col :span="24" style="display:table; width:100%;">
            <el-button style="float:right;" @click="cancel">返回</el-button>
        </el-col>
        <el-col :span="24" style="padding-bottom: 0px; ">
            <bar-chart
                    v-loading="pieChartLoading"
                    :chart-data="chartData"
                    :pie-radius="[30, 200]"
                    width="100%"
                    height="550px"
            />
        </el-col>
    </section>
</template>

<script>
    import BarChart from './componets/divisionPieChart'
    export default {
        name:'safeInfoDetail',
        components:{
            BarChart
        },
        data() {
            return {
                chartData: [],
                pieChartLoading: false,
            }
        },
        methods: {
            cancel() {
                this.$router.go(-1)
            },
            getReports(){
                setTimeout(()=>{
                    this.chartData =[{
                        name:'化学安全',
                        value:236
                    },{
                        name:'实验场所',
                        value:108
                    },{
                        name:'基础安全',
                        value:68
                    },{
                        name:'规章制度',
                        value:36
                    }]
                },400)
            },

            chartClickCheckItem(){
                console.log('000000')
            },

            //初始化页面
            initData() {
                this.getReports();
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.initData();
            })
        }
    }
</script>
<style scoped lang="scss">
.mt30{
    margin-top:30px;
}
.col-title{
    display:inline-table;
    font-weight:600;
    font-size:16px;
    color:#333;
    padding:0 30px 0 15px;
}
    .corrected-total{
        height:180px;
        border-radius: 8px;
        margin:20px;
        font-size:20px;
        color:#fff;
        padding-left:60px;
        -webkit-box-shadow: 3px 5px 15px 0 #d6ddf4;
        box-shadow: 3px 5px 15px 0 #d6ddf4;
        background-size: 115px;
        >p{
            padding-top:40px;
            line-height: 40px;
        }
        &.yiwancheng{
            background:#6a91ec url('../../assets/images/img_yiwancheng.png') center right no-repeat;
            background-size: 115px;
        }
        &.weiwancheng{
            background:#6a91ec url('../../assets/images/img_weiwancheng.png') center right no-repeat;
            background-size: 115px;
        }
        &.wanchengbili{
            background:#6a91ec url('../../assets/images/img_zhenggailv.png') center right no-repeat;
            background-size: 115px;
        }
        span{
            font-size:50px;
        }
    }
</style>
